<template>
  <div id="app">
    <div class="top">
      <div>
        <img
          src="@/assets/logo.png"
          alt=""
          class="logo"
          v-show="pageTitle == '首页'"
        />
        <div v-show="!controlDisplay" @click="$router.go(-1)" class="iconfont return">
          &#xe6ff;
          </div>
      </div>

      <div class="search" @click="search">
        <van-search

          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          v-show="pageTitle == '首页'"
        >
          <template #action>
          
          </template>
        </van-search>

        <div
          v-text="pageTitle"
          v-show="pageTitle != '首页' && pageTitle != '搜索'"
        ></div>
      </div>
    </div>


    <backTop></backTop>

    <router-view></router-view>

    <van-tabbar v-model="active" class="bottom" v-show="controlDisplay">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/shopping"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" to="/user">用户</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import backTop from "@/components/backTop.vue";

export default {
  name: "app",
  data() {
    return {
      pageTitle: "", // 页面标题
      controlDisplay: "", //控制返回按钮的显示
      value: "", // input框的内容
      active: 0, // 底部标签栏默认显示
    };
  },
  watch: {
    // 监听路由变化，修改网页的标题  $route是路由(用来获取当前路由的信息) , $router是路由器(用来操纵路由)
    $route: function (newRoute, oldRoute) {
      this.updateDocumentTitle(newRoute);
    },
  },
  methods: {
    updateDocumentTitle(newRoute) {
      // 更改网页的标题
      this.$nextTick(function () {
        // pageTitle顶部标题
        this.pageTitle = newRoute.meta.title;
        // controlDisplay控制返回按钮的显示
        this.controlDisplay = newRoute.meta.controlDisplay;
        // active保存底部标签栏的路由状态
        this.active = newRoute.meta.active;
      });
    },
    search() {
      this.$router.push("/search");
    },
  },
  components: {
    backTop,
  },
};
</script>

<style lang="scss">

$ui-width: 720;
$num: 15;
$baseFontSize: 50; // 750 / 15
@function px2rem($px) {
  @return $px / $baseFontSize + rem;
}
@font-face {
  font-family: 'iconfont';  /* Project id 2637818 */
  src: url('//at.alicdn.com/t/font_2637818_t2ie7lju9ug.woff2?t=1638190870426') format('woff2'),
       url('//at.alicdn.com/t/font_2637818_t2ie7lju9ug.woff?t=1638190870426') format('woff'),
       url('//at.alicdn.com/t/font_2637818_t2ie7lju9ug.ttf?t=1638190870426') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:24px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }


html {
  font-size: $ui-width / $num + px;
  padding-bottom: px2rem(100);
  // 平滑滚动(让回到顶部有动画效果)
  scroll-behavior: smooth;
}

#app {
  min-width: 320px;
  max-width: 720px;
  margin: auto;
}

.top{
  width: 100%;
  height: 52px;
  background-color: #fafafa;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

.logo {
  width: px2rem(100);
  height: px2rem(50);
  display: block;
  // vertical-align让图片和文字在同一水平线上
  // vertical-align:middle;
}
.return{
  position: absolute;
  top: 14px;
  left: 20px;
  cursor: pointer;
}

.search {
  width: px2rem(500);
  font-size: px2rem(16);
  text-align: center;
}

}

.bottom {
  min-width: 320px;
  max-width: 1000px;
  /* 居中 */
  left: 50%;
  transform: translateX(-50%);
  /*  */
}
</style>
